<template>
  <div class="boxrili">
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
     <van-calendar
  title="空气质量日历"
  :poppable="false"
  :show-confirm="false"
  :style="{ height: '400px' }"
/>
<div class="rili">
  <div class="rili_left">
    <div style="font-size: 13px;margin-bottom: 10px;">AQI:{{ cityList.aqi }}</div>
    <div style="font-size: 25px;">60</div>
  </div>
  <div class="rili_right">
    <div>
    <div class="citys"><span>{{ name }}</span><span style="color: gray;font-size: 12px;">{{ datas[0] }}</span></div>
    <div>{{ cityList.quality }}</div>
    <div class="chuxian">
          <span class="pm">pm2.5:{{ cityList.pm25 }}</span><span class="pm">pm10:{{ cityList.pm10 }}</span><span class="pm">so2:{{ cityList.so2 }}</span
            ><span class="pm">no2:{{ cityList.no2 }}</span><span class="pm">o3:{{ cityList.o3 }}</span><span class="pm">co:{{ cityList.co }}</span>
    </div>
    <div style="color: gray;font-size: 12px;">实时数据，未经审核</div>
  </div>
  </div>

</div>
  </div>
 
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { homeAir} from '../../../service/cityService'
import { useRouter } from 'vue-router';

let router=useRouter();
let cityList:any = ref([])
let name = ref('')
let falg=ref(true);
let date=ref("")
let datas:any=ref([]);
let aa = localStorage.getItem('city')
if (aa?.length) {
  name.value = JSON.parse(aa).name
}

const onClickLeft = () => {
  router.push('/analyse')
}
const cityAir = async () => {
  let { data } = await homeAir({
    key: 'S_kv1Ro8FrmQ4UeD9',
    location: name.value,
    language: 'zh-Hans',
    scope: 'city'
  })
  cityList.value = data.results[0].air.city
  date.value=cityList.value.last_update;
  datas.value=date.value.slice(0,19).split("T");
  console.log(datas.value,cityList.value);
}


onMounted(() => {
  cityAir()
})
</script>

<style lang="scss" scoped>
.boxrili{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.rili{
  display: flex;
  flex: 1;
  width: 100%;

  .rili_left{
    width: 25%;
    background: rgb(62, 216, 195);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .rili_right{
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    .chuxian{
    display: block;
    color: #000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    span{
    width: 30%;
    display: block;
  }}
    div{
      line-height: 30px;
    }
    .citys{
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
